<template>
  <view class="reputation-container">
    <!-- 头部信息 -->
    <view class="header-section">
      <view class="score-card">
        <view class="score-title">当前信誉分</view>
        <view class="score-value" :class="getScoreClass()">{{ userScore }}</view>
        <view class="score-status" :class="getStatusClass()">
          {{ getScoreStatus() }}
        </view>
      </view>
      
      <!-- 信誉分等级指示器 -->
      <view class="score-indicator">
        <view class="indicator-bar">
          <view 
            class="indicator-fill" 
            :style="{ width: getScorePercentage + '%' }"
            :class="getScoreClass()"
          ></view>
        </view>
        <view class="indicator-labels">
          <text class="label">0</text>
          <text class="label">60</text>
          <text class="label">80</text>
          <text class="label">100</text>
        </view>
      </view>
    </view>

    <!-- 快速操作 -->
    <view class="quick-actions">
      <view class="action-item" @click="showScoreRules">
        <view class="action-icon">📋</view>
        <text class="action-text">信誉规则</text>
      </view>
      <view class="action-item" @click="showHistory">
        <view class="action-icon">📊</view>
        <text class="action-text">历史记录</text>
      </view>
      <view class="action-item" @click="showTips">
        <view class="action-icon">💡</view>
        <text class="action-text">提升建议</text>
      </view>
    </view>

    <!-- 最近变动 -->
    <view class="recent-changes">
      <view class="section-title">
        <text>最近变动</text>
        <text class="view-all" @click="showHistory">查看全部</text>
      </view>
      <view class="changes-list">
        <view 
          v-for="(change, index) in recentChanges" 
          :key="index"
          class="change-item"
        >
          <view class="change-icon" :class="change.type">
            {{ change.type === 'increase' ? '+' : '-' }}
          </view>
          <view class="change-content">
            <view class="change-title">{{ change.title }}</view>
            <view class="change-desc">{{ change.description }}</view>
            <view class="change-time">{{ formatTime(change.timestamp) }}</view>
          </view>
          <view class="change-score" :class="change.type">
            {{ change.type === 'increase' ? '+' : '' }}{{ change.score }}
          </view>
        </view>
      </view>
    </view>

    <!-- 信誉分规则弹窗 -->
    <uni-popup ref="rulesPopup" type="center" :mask-click="true">
      <view class="popup-content rules-popup">
        <view class="popup-header">
          <text class="popup-title">信誉分规则</text>
          <text class="popup-close" @click="closeRules">×</text>
        </view>
        <scroll-view class="popup-body" scroll-y>
          <view class="rule-section">
            <view class="rule-title">📋 任务相关</view>
            <view class="rule-item">
              <text class="rule-desc">按时完成任务且获得好评</text>
              <text class="rule-score increase">+2分</text>
            </view>
            <view class="rule-item">
              <text class="rule-desc">任务未能按时完成</text>
              <text class="rule-score decrease">-2分</text>
            </view>
            <view class="rule-item">
              <text class="rule-desc">每拖延一天</text>
              <text class="rule-score decrease">-1分</text>
            </view>
          </view>
          
          <view class="rule-section">
            <view class="rule-title">📝 考试相关</view>
            <view class="rule-item">
              <text class="rule-desc">考试成绩90分以上</text>
              <text class="rule-score increase">+3分</text>
            </view>
            <view class="rule-item">
              <text class="rule-desc">考试成绩70-89分</text>
              <text class="rule-score neutral">+0分</text>
            </view>
            <view class="rule-item">
              <text class="rule-desc">考试成绩60-69分</text>
              <text class="rule-score decrease">-2分</text>
            </view>
            <view class="rule-item">
              <text class="rule-desc">考试成绩低于60分</text>
              <text class="rule-score decrease">-5分</text>
            </view>
          </view>
          
          <view class="rule-section">
            <view class="rule-title">⚠️ 限制说明</view>
            <view class="rule-item warning">
              <text class="rule-desc">信誉分低于60分无法接取任务</text>
            </view>
            <view class="rule-item warning">
              <text class="rule-desc">初始信誉分为80分</text>
            </view>
          </view>
          
          <!-- 最近变动情况 -->
          <view class="rule-section">
            <view class="rule-title">📊 最近变动</view>
            <view 
              v-for="(change, index) in recentChanges.slice(0, 3)" 
              :key="index"
              class="rule-change-item"
            >
              <view class="change-icon-small" :class="change.type">
                {{ change.type === 'increase' ? '+' : '-' }}
              </view>
              <view class="change-content-small">
                <view class="change-title-small">{{ change.title }}</view>
                <view class="change-time-small">{{ formatTime(change.timestamp) }}</view>
              </view>
              <view class="change-score-small" :class="change.type">
                {{ change.type === 'increase' ? '+' : '' }}{{ change.score }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 历史记录弹窗 -->
    <uni-popup ref="historyPopup" type="center" :mask-click="true">
      <view class="popup-content history-popup">
        <view class="popup-header">
          <text class="popup-title">信誉分历史</text>
          <text class="popup-close" @click="closeHistory">×</text>
        </view>
        <scroll-view class="popup-body" scroll-y>
          <view 
            v-for="(record, index) in scoreHistory" 
            :key="index"
            class="history-item"
          >
            <view class="history-header">
              <view class="history-score" :class="record.type">
                {{ record.type === 'increase' ? '+' : '' }}{{ record.score }}
              </view>
              <view class="history-time">{{ formatTime(record.timestamp) }}</view>
            </view>
            <view class="history-title">{{ record.title }}</view>
            <view class="history-desc">{{ record.description }}</view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 提升建议弹窗 -->
    <uni-popup ref="tipsPopup" type="center" :mask-click="true">
      <view class="popup-content tips-popup">
        <view class="popup-header">
          <text class="popup-title">提升建议</text>
          <text class="popup-close" @click="closeTips">×</text>
        </view>
        <scroll-view class="popup-body" scroll-y>
          <view class="tip-section">
            <view class="tip-title">🎯 提升信誉分的方法</view>
            <view class="tip-item">
              <text class="tip-icon">✅</text>
              <text class="tip-text">按时完成任务，争取获得企业好评</text>
            </view>
            <view class="tip-item">
              <text class="tip-icon">📚</text>
              <text class="tip-text">认真准备反作弊考试，争取高分</text>
            </view>
            <view class="tip-item">
              <text class="tip-icon">⏰</text>
              <text class="tip-text">合理安排时间，避免任务延期</text>
            </view>
            <view class="tip-item">
              <text class="tip-icon">🤝</text>
              <text class="tip-text">保持良好的沟通，及时反馈进度</text>
            </view>
          </view>
          
          <view class="tip-section">
            <view class="tip-title">⚠️ 注意事项</view>
            <view class="tip-item warning">
              <text class="tip-icon">🚫</text>
              <text class="tip-text">信誉分低于60分将无法接取新任务</text>
            </view>
            <view class="tip-item warning">
              <text class="tip-icon">📉</text>
              <text class="tip-text">频繁延期或考试不及格会大幅降低信誉分</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ReputationScoreManager, type ScoreChange, type UserScoreData } from '@/utils/reputationScore'
import { MockReputationApiService } from '@/utils/reputationApi'

// 响应式数据
const userScore = ref(80)
const scoreHistory = ref<ScoreChange[]>([])
const recentChanges = ref<ScoreChange[]>([])

// 弹窗引用
const rulesPopup = ref()
const historyPopup = ref()
const tipsPopup = ref()

// 计算属性
const getScorePercentage = computed((): number => {
  return Math.min(Math.max((userScore.value / 100) * 100, 0), 100)
})

// 方法
const getScoreClass = () => {
  return ReputationScoreManager.getScoreLevel(userScore.value).level
}

const getScoreStatus = () => {
  return ReputationScoreManager.getScoreLevel(userScore.value).status
}

const getStatusClass = () => {
  return getScoreClass()
}

const formatTime = (timestamp: number) => {
  return ReputationScoreManager.formatTime(timestamp)
}

// 弹窗控制
const showScoreRules = () => {
  rulesPopup.value.open()
}

const closeRules = () => {
  rulesPopup.value.close()
}

const showHistory = () => {
  historyPopup.value.open()
}

const closeHistory = () => {
  historyPopup.value.close()
}

const showTips = () => {
  tipsPopup.value.open()
}

const closeTips = () => {
  tipsPopup.value.close()
}

// 数据加载
const loadUserScoreData = async () => {
  try {
    // 使用模拟API服务（开发阶段）
    // 生产环境可以替换为 ReputationApiService
    const data = await MockReputationApiService.getUserReputationScore()
    
    userScore.value = data.currentScore
    scoreHistory.value = data.history
    recentChanges.value = data.history.slice(0, 3)
    
  } catch (error) {
    console.error('加载信誉分数据失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    })
  }
}

// 生命周期
onMounted(() => {
  // 页面挂载后的初始化
  loadUserScoreData()
})
</script>

<style scoped>
.reputation-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20rpx;
}

/* 头部区域 */
.header-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.1);
}

.score-card {
  text-align: center;
  margin-bottom: 30rpx;
}

.score-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.score-value {
  font-size: 80rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.score-value.excellent { color: #52c41a; }
.score-value.good { color: #4A90E2; }
.score-value.normal { color: #faad14; }
.score-value.warning { color: #fa8c16; }
.score-value.danger { color: #f5222d; }

.score-status {
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  display: inline-block;
}

.score-status.excellent { 
  background: rgba(82, 196, 26, 0.1); 
  color: #52c41a; 
}
.score-status.good { 
  background: rgba(74, 144, 226, 0.1); 
  color: #4A90E2; 
}
.score-status.normal { 
  background: rgba(250, 173, 20, 0.1); 
  color: #faad14; 
}
.score-status.warning { 
  background: rgba(250, 140, 22, 0.1); 
  color: #fa8c16; 
}
.score-status.danger { 
  background: rgba(245, 34, 45, 0.1); 
  color: #f5222d; 
}

/* 信誉分指示器 */
.score-indicator {
  margin-top: 30rpx;
}

.indicator-bar {
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
}

.indicator-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 6rpx;
}

.indicator-fill.excellent { background: #52c41a; }
.indicator-fill.good { background: #4A90E2; }
.indicator-fill.normal { background: #faad14; }
.indicator-fill.warning { background: #fa8c16; }
.indicator-fill.danger { background: #f5222d; }

.indicator-labels {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999;
}

/* 快速操作 */
.quick-actions {
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.1);
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border-radius: 15rpx;
  transition: all 0.3s ease;
}

.action-item:active {
  background: rgba(74, 144, 226, 0.1);
  transform: scale(0.95);
}

.action-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

/* 最近变动 */
.recent-changes {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(74, 144, 226, 0.1);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 26rpx;
  color: #4A90E2;
  font-weight: normal;
}

.changes-list {
  space-y: 20rpx;
}

.change-item {
  display: flex;
  align-items: center;
  padding: 25rpx;
  border-radius: 15rpx;
  background: #f8f9fa;
  margin-bottom: 20rpx;
}

.change-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.change-icon.increase {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.change-icon.decrease {
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
}

.change-content {
  flex: 1;
}

.change-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.change-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.change-time {
  font-size: 22rpx;
  color: #999;
}

.change-score {
  font-size: 32rpx;
  font-weight: bold;
}

.change-score.increase { color: #52c41a; }
.change-score.decrease { color: #f5222d; }

/* 弹窗样式 */
.popup-content {
  background: white;
  border-radius: 20rpx;
  width: 90vw;
  max-width: 700rpx;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.popup-body {
  flex: 1;
  padding: 25rpx 30rpx;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  min-height: 0;
}

.popup-body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 规则弹窗 */
.rule-section {
  margin-bottom: 30rpx;
}

.rule-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.rule-item {
  display: flex;
  align-items: left;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.rule-item.warning {
  justify-content: flex-start;
}

.rule-desc {
  font-size: 26rpx;
  color: #666;
  flex: 1;
  margin-right: 15rpx;
}

.rule-score {
  font-size: 26rpx;
  font-weight: bold;
  margin-right: 50rpx;
  padding: 8rpx 16rpx;
  border-radius: 10rpx;
  flex-shrink: 0;
}

.rule-score.increase {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.rule-score.decrease {
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
}

.rule-score.neutral {
  background: rgba(153, 153, 153, 0.1);
  color: #999;
}

/* 规则弹窗中的变动情况样式 */
.rule-change-item {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.rule-change-item:last-child {
  border-bottom: none;
}

.change-icon-small {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rpx;
  font-weight: bold;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.change-icon-small.increase {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.change-icon-small.decrease {
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
}

.change-content-small {
  flex: 1;
  min-width: 0;
}

.change-title-small {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 2rpx;
  line-height: 1.3;
}

.change-time-small {
  font-size: 20rpx;
  color: #999;
  line-height: 1.2;
}

.change-score-small {
  font-size: 24rpx;
  font-weight: bold;
  margin-left: 12rpx;
  flex-shrink: 0;
}

.change-score-small.increase {
  color: #52c41a;
}

.change-score-small.decrease {
  color: #f5222d;
}

/* 历史记录弹窗 */
.history-item {
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.history-score {
  font-size: 28rpx;
  font-weight: bold;
  padding: 8rpx 16rpx;
  border-radius: 10rpx;
}

.history-score.increase {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.history-score.decrease {
  background: rgba(245, 34, 45, 0.1);
  color: #f5222d;
}

.history-time {
  margin-right: 50rpx;
  font-size: 24rpx;
  color: #999;
}

.history-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.history-desc {
  font-size: 26rpx;
  color: #666;
}

/* 提升建议弹窗 */
.tip-section {
  margin-bottom: 40rpx;
}

.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.tip-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.tip-item.warning {
  background: rgba(250, 173, 20, 0.05);
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 10rpx 0;
}

.tip-icon {
  font-size: 28rpx;
  margin-right: 15rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

/* 响应式设计 */
@media screen and (min-width: 768px) {
  .reputation-container {
    padding: 40rpx;
    max-width: 1200rpx;
    margin: 0 auto;
  }
  
  .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .score-card {
    flex: 1;
    margin-bottom: 0;
    margin-right: 40rpx;
  }
  
  .score-indicator {
    flex: 1;
    margin-top: 0;
  }
  
  .quick-actions {
    justify-content: space-between;
    max-width: 800rpx;
    margin: 0 auto 30rpx;
  }
  
  .action-item {
    flex: 1;
    margin: 0 20rpx;
  }
  
  .recent-changes {
    max-width: 800rpx;
    margin: 0 auto;
  }
  
  .popup-content {
    width: 60vw;
    max-width: 800rpx;
  }
}

/* 小程序适配 */
/* #ifdef MP-WEIXIN */
.reputation-container {
  padding: 20rpx;
}

.header-section {
  margin: 0 0 30rpx 0;
}

.quick-actions {
  margin: 0 0 30rpx 0;
}

.recent-changes {
  margin: 0;
}

.popup-content {
  width: 95vw;
  max-height: 90vh;
}

.popup-header {
  padding: 20rpx 25rpx;
}

.popup-body {
  padding: 20rpx 25rpx;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.popup-body::-webkit-scrollbar {
  display: none;
}

.rule-section {
  margin-bottom: 25rpx;
}

.rule-item {
  padding: 12rpx 0;
}

.rule-change-item {
  padding: 10rpx 0;
}

.change-icon-small {
  width: 35rpx;
  height: 35rpx;
  font-size: 16rpx;
  margin-right: 10rpx;
}

.change-title-small {
  font-size: 22rpx;
}

.change-time-small {
  font-size: 18rpx;
}

.change-score-small {
  font-size: 22rpx;
}
/* #endif */
</style>
